<template>
  <div style="display: inline-block;margin-right: 5px;">
    <Button type="primary"
            icon="md-add"
            class="button-add"
            @click="open">新增</Button>
    <Modal v-model="modal1"
           title="新增"
           ok-text="提交"
           :loading="loading"
           @on-ok="handleSubmit('formValidate')">
      <Form ref="formValidate"
            :model="formValidate"
            :label-width="90">
        <FormItem label="商品分类名称">
          <Input v-model="formValidate.ClassName"
                 placeholder="请输入商品分类名称" />
        </FormItem>
          <FormItem label="是否推荐">
            <Select v-model="formValidate.RecIs"
                    style="width: 150px">
              <Option v-for="item in RecIs"
                      :value="item.number"
                      :key="item.number">{{ item.text }}</Option>
            </Select>
          </FormItem>
          <FormItem label="商品分类规格">
            <Input v-model="formValidate.CommentLables"
                 type="textarea"
                 placeholder="请输入商品分类规格" />
            <p style="color: #19be6b;">* 商品分类规格，以英文逗号隔开，例：("颜色,规格,库存")</p>
          </FormItem>
          <FormItem label="图片">
            <Upload :action="actionUrl"
                    :show-upload-list="false"
                    :format="['jpg','jpeg','png']"
                    :before-upload="beforeUp"
                    :on-success="upSuccess"
                    :on-error="upError"
                    :on-format-error="formatError">
              <Button type="primary">上传</Button>
              <p style="color: #19be6b;">* 上传成功即可，重新上传则替换原图</p>
              <img class="up-img"
                   :src="formValidate.FilePath"
                   v-show="imgShowHide"/>
            </Upload>
          </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import config from '@/config'
import { editGoodsClass } from '@/api/goods'
export default {
  name: 'add',
  props: {
    nowGra: {
      type: [String, Number]
    }
  },
  data () {
    return {
      modal1: false,
      loading: true,
      RecIs: [
        {
          number: 0,
          text: '不推荐'
        },
        {
          number: 1,
          text: '猜你喜欢'
        },
        {
          number: 2,
          text: '可能还喜欢'
        }
      ],
      formValidate: {
        CommentLables: '',
        FilePath: ''
      },
      AutoId: '',
      actionUrl: '',
      imgShowHide: false
    }
  },
  mounted () {
    this.init()
    this.getAxiosUrl()
  },
  methods: {
    init () {
      this.modal1 = false
      this.loading = true
      this.formValidate = {
        CommentLables: '',
        FilePath: ''
      }
      this.handleReset('formValidate')
    },
    getAxiosUrl () {
      const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
      this.actionUrl = baseUrl + '/UploadFile/UploadFile'
    },
    open () {
      this.init()
      this.modal1 = true
    },
    handleSubmit (name) {
      this.formValidate.AutoId = ''
      this.formValidate.ImgUrl = ''
      this.formValidate.FatherId = this.$route.query.id || ''
      this.formValidate.NowGra = this.nowGra
      this.formValidate.SysUserId = localStorage.getItem('userId')
      editGoodsClass(this.formValidate).then(res => {
        if (res.data.success) {
          this.modal1 = false
          this.loading = true
          this.$Message.info('编辑成功!')
        } else {
          this.modal1 = true
          this.loading = false
          this.$Message.info('编辑失败!')
        }
      }).then(() => {
        this.$emit('getList')
      })
    },
    // 重置表单
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    beforeUp () {
      this.formValidate.FilePath = ''
      this.imgShowHide = false
    },
    upSuccess (response) {
      this.formValidate.FilePath = response.data[0].url
      this.imgShowHide = true
      this.$Message.success('上传成功！')
    },
    upError (error) {
      console.log(error)
    },
    formatError (file) {
      this.$Message.info(`您上传的 "${file.name}" 不符合上传规则，请上传jpg、jpeg、png格式的图片文件！`)
    }
  }
}
</script>

<style lang="less" scoped>
.up-img {
  display: block;
  margin-top: 10px;
  max-width: 300px;
  max-height: 300px;
}
</style>
